<template>
	<view class="content">
		<hs-status-bar type="capsule"></hs-status-bar>
		<top-bar :title="'个人中心'" :haveBack="false"></top-bar>
		<scroll-view class="scroll-box" scroll-anchoring refresher-default-style="black" refresher-background="#F6F6F6"
			:refresher-triggered="triggered" enable-back-to-top refresher-enabled scroll-y @scroll="scroll"
			@scrolltolower="scrolltolower" @refresherrefresh="onRefresh">
			<view class="info">
				<view class="avatar">
					<image class="avatar-image" :src="avatar||'../../static/images/icon/weixin.png'" mode=""></image>
				</view>
				<view class="user-tag">
					<view class="name" @click="copy(code)">
						{{code || '游客'}}
						<image src="@/static/images/icon/fuzhi.png" mode="aspectFit" class="copy"></image>
					</view>
					<view class="phone">{{(phoneNumber || '') +' '}}
						<hs-selectPhoneModel style="display: inline-block;"></hs-selectPhoneModel>
					</view>

				</view>
				<!-- <text class="change-info">修改信息</text> -->
				<view class="service">
					<image class="service-img" src="@/static/images/icon/service.png" mode="aspectFit"></image>
					<text class="service-text">联系客服</text>
					<button open-type="contact" class="contact">在线客服</button>
				</view>

			</view>
			<view class="mymenu hs-row-center hs-align-center">
				<hs-subsection :list="tabsList" :current="tabIndex"
					@switchTab="(index)=>{tabIndex = index}"></hs-subsection>
			</view>
			<view class="share" v-show="tabIndex==0">
				<view class="share-list">
					<share-list :shareList="shareList" :totalAmount="totalAmount" ref="shareList"></share-list>
				</view>
				
			</view>
			<view class="integral" v-show="tabIndex==1">
				<view class="my-integral">
					<view class="integral-text">当前算力</view>
					<text class="integral-credit">{{totalCredits}}</text>
					<text class="integral-text">可生成{{totalCredits}}张图像</text>
					<text class="integral-info" @click="()=>{creditShow = !creditShow}">查看算力详情</text>
				</view>
				<view class="hs-line-x"></view>
				<credit-list :creditList="creditList" v-show="creditShow" @showMoreCredit="showMoreCredit"
					ref="creditList"></credit-list>
				<integral @payCredit="payCredit" ref="integral"></integral>
			</view>
			<view class="order" v-show="tabIndex==2">
				<view class="tabs" :class="{sticky}">
					<u-tabs :current="tabIndexOrder" lineWidth="0" lineHeight="0"
						:inactiveStyle="{ color: '#807D7E', fontSize: '38rpx' }" :activeStyle="{
							color: '#3C4242',
							fontSize: '38rpx',
							fontWeight: '700',
				}" :list="tabsListOrder" @change="switchOrder">
					</u-tabs>
				</view>
				<view class="order-list">
					<order-list :list="orderList" @openDelivery="openDelivery"></order-list>
				</view>
			</view>
		</scroll-view>
		<delivery-step ref="delivery" :list="deliveryList" :company="deliveryCompany"
			:trackingNumber="trackingNumber"></delivery-step>
	</view>
</template>

<script>
	import eventTracking from "@/utils/eventTracking.js"; //埋点
	import {
		getCreditList,
		getShareConversion,
		getShareTotalAmount	
	} from '@/api/my.js'
	import {
		getOrderList,
		getDeliveryList
	} from '@/api/product.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				totalAmount:{},//分享总金额
				sharePageSize:10, //分享页数
				shareList: [],//分享列表
				isNewUser: false,
				creditShow: false,
				packageList: [],
				creditList: [],
				orderList: [],
				selectPackage: 1,
				originalPrice: '',
				discountedPrice: '',
				triggered: false,
				sticky: false,
				tabIndex: 0,
				isEmpty: false,
				deliveryShow: false,
				deliveryCompany: '',
				deliveryList: [],
				trackingNumber: '',
				orderPageSize: 10,
				// tabsList: [{
				// 		name: "算力",
				// 		index: 0,
				// 	},
				// 	{
				// 		name: "订单",
				// 		index: 1,
				// 	},
				// ],
				tabsList: [
					{
						name: "分享",
						index: 0,
					},
					{
						name: "算力",
						index: 1,
					},
					{
						name: "订单",
						index: 2,
					},
				],
				tabIndexOrder: 0,
				tabStatusOrder: 0,
				tabsListOrder: [{
						name: "全部",
						index: 0,
						status: 0,
					},
					{
						name: "待付款",
						index: 1,
						status: 10,
					},
					{
						name: "待发货",
						index: 2,
						status: 20,
					},
					{
						name: "待收货",
						index: 3,
						status: 21,
					},
					{
						name: "退款/售后",
						index: 4,
						status: 40,
					},
					{
						name: "已完成",
						index: 5,
						status: 30,
					},
				],

			};
		},
		computed: {
			...mapGetters(['code', 'avatar', 'phoneNumber', 'phoneModelName', 'totalCredits'])
		},
		onShow() {
			// 监听从支付页过来的信息，切换选项卡
			if (uni.getStorageSync('toOrderPage')) {
				this.tabIndex = 2
				uni.removeStorageSync('toOrderPage')
			}
			this.getCreditList()
			this.getOrderList()
			this.getShareConversionList()
			this.getShareTotalAmountFun()
			this.$refs.integral.getPackageList()
		},
		onLoad() {},
		onHide() {},
		beforeDestroy() {},
		methods: {
			...mapMutations(['setTotalCredits']),
			// 获取分享列表
			getShareConversionList(lastId) {
				getShareConversion({
					pageSize: this.sharePageSize,
					lastId
				}).then(res => {
					console.log(res,'分享列表')
					if (lastId) {
						this.shareList = !lastId ? res.data : this.shareList.concat(res.data)
					} else {
						this.shareList = res.data
					}
					this.triggered = false
				})
			},
			async getShareTotalAmountFun() {
				 const res = await getShareTotalAmount()
				 if(res.code === 200){
					this.totalAmount = res.data
				 }
			},
			// 获取算力使用记录列表
			getCreditList(lastId) {
				getCreditList({
					pageSize: 10,
					lastId,
				}).then(res => {
					this.creditList = !lastId ? res.data.list : this.creditList.concat(res.data.list)
					this.setTotalCredits(res.data.totalCredits)
					this.triggered = false
					if (res.data.list.length == 0) {
						this.$refs.creditList.hasMore = false
					} else {
						this.$refs.creditList.hasMore = true
					}
				})
			},
			// 查看更多算力使用记录
			showMoreCredit() {
				if (this.creditList.length < this.pageSize) return
				this.getCreditList(this.creditList[this.creditList.length - 1].id)
			},
			// 获取订单列表
			getOrderList(status, lastId) {
				getOrderList({
					status: status == 0 ? '' : status,
					pageSize: this.orderPageSize,
					lastId
				}).then(res => {
					if (lastId) {
						this.orderList = [...this.orderList, ...res.data]
					} else {
						this.orderList = res.data
					}
					this.triggered = false
				})
			},
			// 展开\关闭物流信息
			openDelivery(data) {
				this.trackingNumber = data.trackingNumber
				getDeliveryList(data).then(res => {
					this.deliveryCompany = res.data.com
					this.deliveryList = res.data.list.reverse()
					this.$refs.delivery.open()
				})
			},
			// 切换订单列表
			switchOrder(e) {
				this.tabIndexOrder = e.index
				this.tabStatusOrder = e.status
				this.getOrderList(e.status)
			},
			// 充值算力成功回调
			payCredit() {
				getCreditList({
					pageSize: 10
				}).then(res => {
					this.creditList = res.data
					this.creditShow = true
					this.getOrderList(this.tabStatusOrder)
				})
			},
			// 监听订单tapbar是否吸顶
			scroll(e) {
				if (e.detail.scrollTop > 313 * (e.detail.scrollWidth / 750) && !this.sticky) {
					this.sticky = true
				} else if (e.detail.scrollTop < 313 * (e.detail.scrollWidth / 750) && this.sticky) {
					this.sticky = false
				}
			},
			copy(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.showToast({
							title: '用户ID已复制到剪贴板',
							icon: 'none'
						});
					}
				});
			},
			// 刷新
			onRefresh() {
				if (this.triggered) return
				this.triggered = true;
				setTimeout(() => {
					this.getCreditList()
					this.getOrderList(this.tabStatusOrder)
				}, 500)
			},
			// 滑动到底部
			scrolltolower() {
				// 根据当前tab执行不同加载逻辑
				if (this.tabIndex === 0) { // 分享列表
					console.log('分享列表滑动到底部', this.shareList.length)
					// if (this.shareList.length > this.sharePageSize) return
					if (this.shareList.length === 0 || this.shareList.length % this.sharePageSize !== 0) return//用返回的数据跟每一页的数据进行判断数据是否不满一页（是整数倍，说明已加载完所有数据）
					this.getShareConversionList(this.shareList[this.shareList.length - 1].id)
				} else if (this.tabIndex === 2) { // 订单列表
					console.log('订单列表滑动到底部', this.orderList.length)
					// if (this.orderList.length < this.orderPageSize) return
					if (this.orderList.length === 0 || this.orderList.length % this.orderPageSize !== 0) return
					this.getOrderList(this.tabStatusOrder, this.orderList[this.orderList.length - 1].id)
				}
			},
			// 分享列表滑动到底部
			scrolltolowerShare() {
			    console.log('分享列表滑动到底部')
			},
			onTabItemTap(e){
				console.log(e,'监听点击的tab')
				eventTracking.event('PERSONAL_CENTER', e.pagePath, );
			},
		},
	};
</script>

<style lang="scss">
	.content {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;

		.scroll-box {
			overflow: hidden;
			flex-grow: 1;



			.info {
				width: calc(100% - 28rpx);
				height: 169rpx;
				background: #fff;
				margin: 20rpx auto;
				position: relative;

				.avatar {
					height: 100%;
					width: 119rpx;
					text-align: center;
					padding-top: 30rpx;
					float: left;

					.avatar-image {
						height: 80rpx;
						width: 80rpx;
						border-radius: 50%;
					}
				}

				.user-tag {
					float: left;
					margin-top: 30rpx;

					.copy {
						height: 30rpx;
						width: 30rpx;
						margin-left: 17rpx;
					}

					.name {
						display: block;
						color: #000000;
						font-size: 30rpx;
						margin-bottom: 15rpx;
						font-weight: 500;
					}

					.phone {
						display: block;
						color: #6C7172;
						font-size: 25rpx;
						font-weight: 250;
						color: #333333;

						.t2 {
							font-size: 25rpx;
							font-weight: 250;
							color: #333333;
						}
					}
				}

				.change-info {
					font-size: 25rpx;
					font-weight: 600;
					text-decoration: underline;
					position: absolute;
					bottom: 12rpx;
					right: 18rpx;
					color: #333333;
				}

				.service {
					width: 85rpx;
					position: absolute;
					top: 30rpx;
					right: 25rpx;

					.service-img {
						height: 53rpx;
						width: 100%;
					}

					.service-text {
						display: block;
						color: #3D3D3D;
						font-size: 21rpx;
					}

					.contact {
						position: absolute;
						height: 100%;
						width: 100%;
						z-index: 1;
						top: 0;
						opacity: 0;
					}
				}
			}

			.mymenu {
				margin-bottom: 20rpx;
			}

			.integral {
				margin-left: 14rpx;
				background: #fff;
				width: calc(100% - 28rpx);
				padding-bottom: 16rpx;

				.my-integral {
					position: relative;
					padding: 20rpx 40rpx 0rpx;
					display: flex;
					justify-content: space-between;
					line-height: 60rpx;
					flex-direction: column;
					text-align: center;

					.integral-text {
						font-size: 31rpx;
						color: #6C7172;
						font-weight: 250;
					}

					.integral-credit {
						font-size: 53rpx;
						color: #FFA729;
						font-weight: 500;
					}

					.integral-info {
						font-size: 25rpx;
						font-weight: 250;
						color: #333333;
						text-decoration: underline;
						position: absolute;
						right: 40rpx;
						top: 24rpx;
					}
				}


			}

			.order {
				.tabs {
					width: 100%;
					position: sticky;
					top: -1rpx;
					z-index: 1;

					&.sticky {
						background-color: #fff;
					}
				}

				.order-list {
					width: calc(100% - 34rpx);
					margin-left: 17rpx;
				}
			}
		}

		.delivery {
			::v-deep .u-text__value {
				font-size: 30rpx !important;
				font-weight: bold !important;
			}
		}

		.service-code {
			height: 250rpx;
			width: 250rpx;
			margin: 64rpx 124rpx 10rpx;
		}

		.service-code-text {
			text-align: center;
			margin-bottom: 30rpx;
		}
	}
</style>